<script setup name="Index">
import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
import product from './components/product.vue'
import service from './components/service.vue'
import solution from './components/solution.vue'

import { useI18n } from 'vue-i18n'
const { t } = useI18n()

import { imageUrl } from '@/utils/imageUrl'

const isPC = ref(false)

onMounted(() => {
	// 判断设备类型（可根据需求调整阈值）
	isPC.value = window.matchMedia('(min-width: 992px)').matches

	// 监听窗口变化
	window.addEventListener('resize', () => {
		isPC.value = window.matchMedia('(min-width: 992px)').matches
	})
})

// AOS 动画初始化
onMounted(() => {})
</script>

<template>
	<main>
		<!-- 内容区域 -->
		<section class="content-section" id="domId2">
			<div class="container">
				<article class="service-item">
					<product />
				</article>
			</div>

			<div class="container">
				<article class="service-item">
					<service />
				</article>
			</div>

			<div class="container">
				<article class="service-item">
					<solution />
				</article>
			</div>
		</section>
	</main>
</template>

<style scoped lang="scss">
// 导入首页专属样式
@import url('./index.scss');
</style>
